<template>
  <div class="bottom-nav">
    <slot></slot>
  </div>
</template>


<style lang="scss" scoped>
.bottom-nav {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--bottom-nav-height, 80px);
  background: linear-gradient(to top,
    rgba(13, 19, 35, 0.8) 0%,
    rgba(13, 19, 35, 0.6) 50%,
    rgba(13, 19, 35, 0) 100%
  );
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  pointer-events: auto;
  z-index: 1;

  :deep(.nav-item) {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s;

    .el-icon {
      font-size: 24px;
      color: #fff;
    }

    span {
      color: #fff;
      font-size: 14px;
    }

    &:hover,
    &.active {
      opacity: 1;
    }
  }
}
</style> 